<!-- 批量操作组件 -->
<template>
  <div class="operateList">
    <el-select
      v-model="selectValue"
      class="m-2"
      :placeholder="currentPlaceholder"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button style="margin-left: 20px" type="primary" @click="submitOperation"
      >确定</el-button
    >
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import { useRoute } from "vue-router";

const selectValue = ref(""); // 下拉框选中的值
// 下拉框
const options = [
  {
    value: "0",
    label: "取消推荐",
  },
  {
    value: "1",
    label: "设为推荐",
  },
  {
    value: "2",
    label: "删除",
  },
];
const route = useRoute();
let currentPlaceholder = ref("");
// 根据不同页面设置placeholder的值
currentPlaceholder.value =
  route.path === "/oms/returnApply" ? "批量删除" : "批量操作";
// 子传父事件集合
const emit = defineEmits(["submitOperation"]);

/*
 * 方法
 */
// 提交操作，传递对应操作的value值
const submitOperation = () => {
  emit("submitOperation", selectValue.value);
};
</script>
<style lang="less" scoped>
.operateList {
  margin-top: 15px;
  float: left;
}
</style>
